<template>
	<view :style="{ '--color': color }">
		<!-- #ifdef MP-WEIXIN -->
		<navBar :bgMake="5" :Color="2" :title="title"></navBar>
		<!-- #endif -->
		<view class="viewbox auto d-flex f-column p-top30">
			<text class="color_33 size42 bold">基本信息</text>
			<text class="color_33 size30 m-top20">填写基本信息，只需几秒，开启缘分！</text>
		</view>

		<view class="viewbox auto m-top50">
			<block v-for="(item, index) in pageData" :key="index">
				<view class="list" v-if="item.vpType == 1">
					<text class="name">{{ item.vpName }}</text>
					<input type="text" class="Input" v-model="item.value" :placeholder="`请输入${item.vpName}`" placeholder-class="place" />
				</view>

				<picker mode="selector" :range="item.vpValue" @change="Picker($event, item)" class="picker" v-if="item.vpType == 2">
					<view class="sele_list">
						<text class="name">{{ item.vpName }}</text>
						<view class="d-flex a-center" :class="item.value ? 'black' : 'color'">
							<text class="size30">{{ item.value ? item.value : '请选择' }}</text>
							<view class="iconfont icon-a-zujian7 h6 p-left10"></view>
						</view>
					</view>
				</picker>

				<picker mode="date" @change="Picker($event, item)" class="picker" v-if="item.vpType == 5">
					<view class="sele_list">
						<text class="name">{{ item.vpName }}</text>
						<view class="d-flex a-center" :class="item.value ? 'black' : 'color'">
							<text class="size30">{{ item.value ? item.value : '请选择' }}</text>
							<view class="iconfont icon-a-zujian7 h6 p-left10"></view>
						</view>
					</view>
				</picker>

				<view class="sele_list" @click="showAddPicker(index, item)" v-if="item.vpType == 6">
					<text class="name">{{ item.vpName }}</text>
					<view class="d-flex a-center" :class="item.value ? 'black' : 'color'">
						<text class="size30">{{ item.value ? item.value : '请选择' }}</text>
						<view class="iconfont icon-a-zujian7 h6 p-left10"></view>
					</view>
				</view>

				<view class="Photos" v-if="item.vpType == 7">
					<text class="name">{{ item.vpName }}</text>
					<view class="row j-centert">
						<view class="rowList" v-for="(sItem, sIndex) in item.Imgs" :key="sIndex">
							<view class="LitImg">
								<image :src="$imgUrls(sItem)" mode="aspectFill" class="wh bor_radius_10"></image>
								<view class="iconfont icon-shanchu1 color size46" @click.stop="DelImg(index, sIndex)"></view>
							</view>
						</view>
						<view class="rowList" @click="UploadPhoto(index, 7)" v-if="!item.Imgs.length">
							<view class="LitImg flexac">
								<view class="iconfont icon-tianjia color_f2 size100"></view>
							</view>
						</view>
					</view>
				</view>

				<view class="Photos" v-if="item.vpType == 8">
					<text class="name">{{ item.vpName }}</text>
					<view class="row">
						<view class="rowList" v-for="(sItem, sIndex) in item.Imgs" :key="sIndex">
							<view class="LitImg">
								<image :src="$imgUrls(sItem)" mode="aspectFill" class="wh bor_radius_10"></image>
								<view class="iconfont icon-shanchu1 color size46" @click.stop="DelImg(index, sIndex)"></view>
							</view>
						</view>
						<view class="rowList" @click="UploadPhoto(index, 8)" v-if="item.Imgs.length < 9">
							<view class="LitImg flexac">
								<view class="iconfont icon-tianjia color_f2 size100"></view>
							</view>
						</view>
					</view>
				</view>

				<view class="listContent" v-if="item.vpType == 3">
					<view class="listBot">
						<text class="name">{{ item.vpName }}</text>
						<input type="text" class="Input" v-model="item.value" :placeholder="`请输入${item.vpName}`" placeholder-class="place" />
					</view>
					<view class="contentTxt">
						<view class="rows size26 black m-bot20" v-for="(sItem, sIndex) in item.vpValueList" :key="sIndex">{{ sItem }}</view>
					</view>
				</view>
			</block>
		</view>

		<Tip></Tip>

		<view class="row j-centert p-bot100 m-top80">
			<view class="Btns" @click="Continue">下一步</view>
		</view>
		<mpvue-city-picker
			:shixian2="shixian2"
			ref="mpvueCityPicker_"
			:pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onConfirm"
			@onCancel="shixian2 = false"
		></mpvue-city-picker>
	</view>
</template>
<!-- 
vpType  
  1  单行输入
  2  下拉选择
  3  文本输入
  4  复选框
  5  日期选择
  6  城市级联
  7  单图上传
  8  多图上传

 -->
<script>
import { mapState, mapMutationsf } from 'vuex';
import Tip from '@/User/components/Tip.vue';
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
export default {
	components: {
		Tip,
		mpvueCityPicker
	},
	data() {
		return {
			cityPickerValueDefault: [0, 0, 0], // 默认选择地址
			shixian2: false,
			pageData: [],
			showadd: 0
		};
	},
	onShow() {
		this.user_base_info();
	},
	methods: {
		user_base_info() {
			this.$http
				.get({
					url: '/WeddingApi/user_base_info',
					data: {
						times: 1
					}
				})
				.then((res) => {
					if (res.code != 200) return this.$Toast(res.msg);
					const result = res.data.list || [];
					result.forEach((item, index) => {
						if (item.vpType == 3 && item.vpValue) {
							item.vpValueList = item.vpValue.split('\n');
						}
						if (item.vpType == 8 && item.vpValue) {
							item.Imgs = item.vpValue.split(',');
						}
						if (item.vpType == 8 && !item.vpValue) {
							item.Imgs = [];
						}
					});
					this.pageData = result;
				});
		},
		Picker(e, item) {
			let Index = this.pageData.findIndex((n) => n.vpId == item.vpId);
			let every = e.detail.value;
			if (item.vpType == 2) this.pageData[Index].value = this.pageData[Index].vpValue[every];
			if (item.vpType == 5) this.pageData[Index].value = every;
		},

		showAddPicker(index, sItem) {
			this.showadd = index;
			if (sItem.code && sItem.code.length > 1) {
				sItem.code.forEach((result, currt) => {
					this.cityPickerValueDefault[currt] = Number(result);
				});
			}
			this.shixian2 = true;
		},

		onConfirm(e) {
			this.shixian2 = false;
			var add = e.label.replace(/-/g, '/');
			this.pageData[this.showadd].value = add;
			this.pageData[this.showadd].code = e.value;
		},

		async UploadPhoto(index, vpType) {
			if (vpType == 7) {
				const Photo = await this.$common.chooseImage(1);
				if (!Photo.length) return;
				this.pageData[index].Imgs = this.pageData[index].Imgs.concat(Photo);
				this.pageData[index].value = Photo.join('');
			}
			if (vpType == 8) {
				let num = 9 - this.pageData[index].Imgs.length;
				const Photo = await this.$common.chooseImage(num);
				if (!Photo.length) return;
				this.pageData[index].Imgs = this.pageData[index].Imgs.concat(Photo);
				this.pageData[index].value = this.pageData[index].Imgs.join(',');
			}
		},

		DelImg(index, sIndex) {
			this.pageData[index].Imgs.splice(sIndex, 1);
		},
		Continue() {
			let that = this;
			for (var item of that.pageData) {
				if (item.bixu == 1 && !item.value) return that.$Toast(`${item.vpName}不能为空！`);
			}
			that.$http
				.post({
					url: '/WeddingApi/edit_base_info',
					data: {
						property: JSON.stringify(that.pageData)
					}
				})
				.then((res) => {
					if (res.code != 200) return that.$Toast(res.msg);
					this.toUrl(`loginTwo`);
				});
		}
	},
	computed: {
		...mapState(['title', 'color'])
	}
};
</script>

<style lang="scss">
page {
	background-color: $pageBg;
}
</style>
<style lang="scss" scoped>
.list,
.sele_list,
.listBot {
	width: 100%;
	height: 88rpx;
	padding: 0 24rpx;
	border-radius: 10rpx;
	overflow: hidden;
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	box-sizing: border-box;
}

.list,
.sele_list,
.textarea {
	margin-bottom: 30rpx;
}

.picker {
	width: 100%;
	height: 88rpx;
	margin-bottom: 30rpx;
}

.name {
	color: #000;
	font-weight: bold;
	font-size: 30rpx;
}

.Input {
	flex: 1;
	height: 100%;
	text-align: right;
	padding-left: 20rpx;
	font-size: 30rpx;
	color: #000;
}

.listContent {
	width: 100%;
	background-color: #ffffff;
	border-radius: 10rpx;
	overflow: hidden;
}

.contentTxt {
	padding: 0 24rpx 10rpx 24rpx;
}

.Btns {
	width: 600rpx;
	height: 80rpx;
	background-color: var(--color);
	border-radius: 40rpx;
	color: #ffffff;
	font-size: 34rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.Photos {
	width: 100%;
	padding: 24rpx;
	border-radius: 10rpx;
	overflow: hidden;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	position: relative;
	box-sizing: border-box;
}

.rowList {
	width: 30%;
	margin-right: 4.8%;
}

.rowList:nth-child(3n) {
	margin-right: 0;
}

.LitImg {
	width: 200rpx;
	height: 200rpx;
	border-radius: 20rpx;
	margin-top: 30rpx;
	position: relative;
}

.LitImg::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	border: 1px solid #cccccc;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	width: 200%;
	height: 200%;
	transform: scale(0.5);
	-webkit-transform: scale(0.5);
	transform-origin: left top;
	-webkit-transform-origin: left top;
	border-radius: 20rpx;
}

.icon-shanchu1 {
	position: absolute;
	background-color: #ffffff;
	top: -12rpx;
	right: -12rpx;
	z-index: 10;
	border-radius: 50%;
}
</style>
